<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in carouselChartData" :key="item.id">
        <img :src="item.pic_url" alt="">
      </van-swipe-item>
    </van-swipe>  
    <!-- 商品列表 -->
    <Goods :goodList="goodList">
      商品
    </Goods>
    <!-- 热销商品列表 -->
    <Goods :goodList="hootGoodList">
      热销商品
    </Goods>
  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue'
import {getCarouselChartData,getGoodList} from '@/api/home.js'

// 轮播图数据
let carouselChartData=ref([]);
// 商品列表数据
let goodList=ref([]);
// 热销商品数据
let hootGoodList=ref([]);

onMounted(async()=>{
  // 获取轮播数据
 let res=await getCarouselChartData({limit:'10',page:'1'});
 carouselChartData.value=res.list;
  // 获取商品列表 
  goodList.value=(await getGoodList({limit:'10',page:'1',sort:'recent'})).list
  // 获取热销商品列表
  hootGoodList.value=(await getGoodList({limit:'10',page:'1',sort:'sale'})).list
})

</script>

<style lang="less" scoped>
  .my-swipe .van-swipe-item {
    img{
      width: 100%;
    }
  }
</style>

